<template>
  <div id="editMetadata">
    <el-container>
      <el-header>
        <div>
          <div style="display: inline-block">
            <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                       @click="goBack">返回
            </el-button>
          </div>
          <div style="display: inline-block">|</div>
          <div style="display: inline-block;">
            <div style="padding-bottom: 15px;margin-left:10px">
              <span v-if="!disabled"
                    style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">编辑元数据</span>
              <span v-if="disabled"
                    style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">查看元数据</span>
            </div>
          </div>
          <div style="border-bottom: solid 1px #C9C9C9;"></div>
        </div>
      </el-header>
      <el-container>
        <el-main style="height: 500px; flex-grow: 1;">
          <div style="font-family: PingFangSC-Regular">
            <el-form :inline="true" :model="MetadataForm"
                     class="demo-form-inline">
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>中文名称:</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['journal-title-group']['journal-title'][0]"></el-input>
                </div>
                <div class="inline-block">
                  <div>英文名称:</div>
                  <el-input v-if="MetadataForm['journal-title-group']['journal-title'].length > 1"
                            size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['journal-title-group']['journal-title'][1]['content']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>ISSN</div>
                  <el-input size="small" disabled class="input-with-select"
                            v-model="MetadataForm['issn'][0]['content']"></el-input>
                </div>
                <div class="inline-block">
                  <div>出版社名称</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['publisher']['publisher-name'][0]"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版社地址</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['publisher']['publisher-loc'][0]"></el-input>
                </div>
                <div class="inline-block">
                  <div>出版社名称(英文)</div>
                  <el-input v-if="MetadataForm['publisher']['publisher-name'].length > 1 &&
                                  UTIL.isEmpty(MetadataForm['publisher']['publisher-name'][1]['specific-use'])"
                            size="small"
                            :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['publisher']['publisher-name'][1]['content']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版社地址(英文)</div>
                  <el-input v-if="MetadataForm['publisher']['publisher-loc'].length > 1 &&
                                  UTIL.isEmpty(MetadataForm['publisher']['publisher-loc'][1]['specific-use'])"
                            size="small"
                            :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['publisher']['publisher-loc'][1]['content']"></el-input>
                  <el-input v-else size="small" disabled class="input-with-select"/>
                </div>
                <div class="inline-block">
                  <div>出版日期(日)</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['pub-date']['day']"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>出版日期(月)</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['pub-date']['month']"></el-input>
                </div>
                <div class="inline-block">
                  <div>出版日期(年)</div>
                  <el-input size="small" :disabled="disabled" class="input-with-select"
                            v-model="MetadataForm['pub-date']['year']"></el-input>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="inline-block">
                  <div>第几卷</div>
                  <el-input size="small" disabled class="input-with-select"
                            v-model="MetadataForm['volume']"></el-input>
                </div>
                <div class="inline-block">
                  <div>第几期</div>
                  <el-input size="small" disabled class="input-with-select"
                            v-model="MetadataForm['issue']"></el-input>
                </div>
              </div>
              <!-- 出版单位名称没有英文 -->
              <span v-if="UTIL.isNotEmpty(MetadataForm['publisher']['publisher-name'][1]['specific-use'])">
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>主办单位名称</div>
                    <el-input v-model="MetadataForm['publisher']['publisher-name'][1]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>主办单位名称(英文)</div>
                    <el-input v-if="MetadataForm['publisher']['publisher-name'].length > 2"
                              v-model="MetadataForm['publisher']['publisher-name'][2]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                    <el-input v-else class="input-with-select" disabled size="small"/>
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>主办单位地址</div>
                    <el-input v-model="MetadataForm['publisher']['publisher-loc'][1]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>主办单位地址(英文)</div>
                    <el-input v-if=" MetadataForm['publisher']['publisher-loc'].length > 2"
                              v-model="MetadataForm['publisher']['publisher-loc'][2]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                    <el-input v-else class="input-with-select" disabled size="small"/>
                  </div>
                </div>
              </span>
              <!-- 出版单位名称有英文 -->
              <span v-else>
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>主办单位名称</div>
                    <el-input v-model="MetadataForm['publisher']['publisher-name'][2]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>主办单位名称(英文)</div>
                    <el-input v-if=" MetadataForm['publisher']['publisher-name'].length > 3"
                              v-model="MetadataForm['publisher']['publisher-name'][3]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                    <el-input v-else class="input-with-select" disabled size="small"/>
                  </div>
                </div>
                <div style="margin-top: 10px">
                  <div class="inline-block">
                    <div>主办单位地址</div>
                    <el-input v-model="MetadataForm['publisher']['publisher-loc'][2]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                  </div>
                  <div class="inline-block">
                    <div>主办单位地址(英文)</div>
                    <el-input v-if=" MetadataForm['publisher']['publisher-loc'].length > 3"
                              v-model="MetadataForm['publisher']['publisher-loc'][3]['content']"
                              :disabled="disabled" class="input-with-select"
                              size="small"></el-input>
                    <el-input v-else class="input-with-select" disabled size="small"/>
                  </div>
                </div>
              </span>
            </el-form>
          </div>
        </el-main>
      </el-container>
      <el-footer style="margin-top: 30px;">
        <div style=" text-align: center">
          <el-button size="small" @click="goBack">取消</el-button>
          <el-button size="small" type="success" @click="updateMetadataById" v-if="!disabled">确定</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>

</template>

<script>

export default {
  name: "JournalMetadata",
  data() {
    return {
      MetadataForm: {},
      disabled: true
    }
  },
  methods: {
    updateMetadataById: function () {
      if (UTIL.isEmpty(this.MetadataForm['journal-title-group']['journal-title'][0])) {
        this.$message.warning("中文名称不能为空");
        return;
      }
      if (this.MetadataForm['journal-title-group']['journal-title'].length > 1 && UTIL.isEmpty(this.MetadataForm['journal-title-group']['journal-title'][1]['content'])) {
        this.$message.warning("英文名称不能为空");
        return;
      }
      if (UTIL.isEmpty(this.MetadataForm['publisher']['publisher-name'][0])) {
        this.$message.warning("出版社名称不能为空");
        return;
      }
      if (UTIL.isEmpty(this.MetadataForm['publisher']['publisher-loc'][0])) {
        this.$message.warning("出版社地址不能为空");
        return;
      }
      if (this.MetadataForm['publisher']['publisher-name'].length > 1 && UTIL.isEmpty(this.MetadataForm['publisher']['publisher-name'][1]['content'])) {
        this.$message.warning("出版社英文名称不能为空");
        return;
      }
      if (this.MetadataForm['publisher']['publisher-loc'].length > 1 && UTIL.isEmpty(this.MetadataForm['publisher']['publisher-loc'][1]['content'])) {
        this.$message.warning("出版社英文地址不能为空");
        return;
      }
      if (UTIL.isEmpty(this.MetadataForm['pub-date']['day'])) {
        this.$message.warning("出版日期(日)不能为空");
        return;
      }
      if (UTIL.isEmpty(this.MetadataForm['pub-date']['month'])) {
        this.$message.warning("出版日期(月)不能为空");
        return;
      }
      if (UTIL.isEmpty(this.MetadataForm['pub-date']['year'])) {
        this.$message.warning("出版日期(年)不能为空");
        return;
      }
      let param = new URLSearchParams();
      param.append("data", JSON.stringify(this.MetadataForm));
      param.append("id", this.$route.query.id);
      this.axios.post('/pmph/action/journal/updateMetadataById', param)
        .then((response) => {
          this.$router.push("/journalLib");
        })
    },
    goBack: function () {
      this.$router.push("/journalLib");
    }
  },
  created() {
    this.MetadataForm = JSON.parse(this.$route.query.metadata);
    this.disabled = this.$route.query.disabled === 'true';
  },
  beforeRouteLeave(to, from, next) {
    to.meta.isUseCache = false;
    next();
  }
}
</script>

<style scoped>

.input-with-select {
  width: 400px;
  margin-top: 10px;
}

.inline-block {
  display: inline-block;
  margin-left: 10px;
}
</style>
